<!DOCTYPE html>
<html>

<head>
    <!-- 页面meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>黑马面面管理系统</title>
    <meta name="description" content="AdminLTE2定制版">
    <meta name="keywords" content="AdminLTE2定制版">
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    <link rel="stylesheet" href="../plugins/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="../plugins/adminLTE/css/AdminLTE.css">
    <link rel="stylesheet" href="../css/style.css">
    <link rel="stylesheet" href="../element-ui/lib/theme-chalk/index.css">

    <script src="../js/vue.js"></script>
    <script src="../js/axios-0.18.0.js"></script>
    <script src="../element-ui/lib/index.js"></script>
</head>
<body>
    <div id="frameContent" class="content-wrapper" style="margin-left:0px;">
        <!-- 内容头部 /-->
        <section class="content-header">
            <h1>系统管理
                <small>用户管理</small>
            </h1>
            <ol class="breadcrumb">
                <li><a href="all-admin-index.html"><i class="fa fa-dashboard"></i> 首页</a></li>
            </ol>
        </section>
        <!-- 正文区域 -->
        <section class="content">
            <div class="box box-primary">
                <div class="box-header with-border">
                    <h3 class="box-title">用户列表</h3>
                </div>
                <!--分页数据-->
                <div class="box-body">
                    <div class="table-box">
                        <div class="pull-left">
                            <div class="form-group form-inline">
                                <!--<div class="btn-group">
                                    <button v-if="permissionList.includes('/system/user/save')" type="button" class="btn btn-default" title="新建" @click='handleCreate()'><i class="fa fa-file-o"></i> 新建</button>
                                    <button v-if="permissionList.includes('/system/user/delete')" type="button" class="btn btn-default" title="删除" @click='handleDelete()'><i class="fa fa-trash-o"></i> 删除</button>
                                    <button type="button" class="btn btn-default" title="刷新" onclick="window.location.reload();"><i class="fa fa-refresh"></i> 刷新</button>
                                </div>-->
                                <div class="btn-group">
                                    <button type="button" class="btn btn-default" title="新建" @click='handleCreate()'><i class="fa fa-file-o"></i> 新建</button>
                                    <button type="button" class="btn btn-default" title="删除" @click='handleDelete()'><i class="fa fa-trash-o"></i> 删除</button>
                                    <button type="button" class="btn btn-default" title="刷新" onclick="window.location.reload();"><i class="fa fa-refresh"></i> 刷新</button>
                                </div>
                            </div>
                        </div>
                        <div class="box-tools pull-right">
                            <div class="has-feedback">
                                <input type="text" class="form-control input-sm" placeholder="搜索">
                                <span class="glyphicon glyphicon-search form-control-feedback"></span>
                            </div>
                        </div>
                        <table id="dataList" class="table table-bordered table-striped table-hover dataTable">
                            <thead>
                            <tr>
                                <th class="" style="padding-right:0px;"></th>
                                <th class="sorting">邮箱</th>
                                <th class="sorting">用户名</th>
                                <th class="sorting">性别</th>
                                <th class="sorting">所属部门</th>
                                <th class="sorting">状态</th>
                                <th class="text-center">操作</th>
<!--                                <th class="text-center" v-if="permissionList.includes('/system/user/edit') || permissionList.includes('/system/user/updateUserAndRoles')">操作</th>-->
                            </tr>
                            </thead>
                            <tbody>
                            <tr v-for="user in dataList">
                                <td><input type="checkbox" v-model="checkedItemIds" :value="user.id"></td>
                                <td>{{user.email }}</td>
                                <td>{{user.userName}}</td>
                                <td>{{user.gender==0?'男':'女'}}</td>
                                <td>{{user.dept?user.dept.deptName:"" }}</td>
                                <td>{{user.state==0?'停用':'启用'}}</td>
                                <th class="text-center">
                                    <button type="button" class="btn bg-olive btn-xs" @click='handleUpdate(user.id)'>编辑</button>
                                    <button type="button" class="btn bg-olive btn-xs" @click='handleShowRole(user.id)'>配置角色</button>
                                </th>
                               <!-- <th class="text-center" v-if="permissionList.includes('/system/user/edit') || permissionList.includes('/system/user/updateUserAndRoles')">
                                    <button v-if="permissionList.includes('/system/user/edit')" type="button" class="btn bg-olive btn-xs" @click='handleUpdate(user.id)'>编辑</button>
                                    <button v-if="permissionList.includes('/system/user/updateUserAndRoles')" type="button" class="btn bg-olive btn-xs" @click='handleShowRole(user.id)'>配置角色</button>
                                </th>-->
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <!--
              分页组件
                @size-change： 当改变每页条数时触发的函数
                @current-change：当改变页码时触发的函数
                current-page ：默认的页码
                :page-sizes：每页条数选择框中显示的值
                :page-size : 默认的每页条数
                layout： 分页组件的布局
                    total（总条数）, sizes(每页条数), prev（上一页）, pager(所有的页码), next(下一页), jumper（跳转页码）
                :total: 总条数
          -->
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="pagination.currentPage"
                        :page-sizes="[3,5,8]"
                        :page-size="pagination.pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="pagination.total">
                </el-pagination>
            </div>
        </section>

        <!--添加弹出框-->
        <el-dialog title="添加用户信息" :visible.sync="dialogFormVisible4Add" @close="resetForm()">
            <!--
                :model="formData": 关联数据
                :rules: 关联校验规则
                ref： 在获取表单对象时使用
            -->
            <el-form :model="formData" ref="addForm" label-width="100px" class="demo-ruleForm">
                <div class="row data-type" style="margin: 0px">
                    <div class="col-md-2 title">邮箱</div>
                    <div class="col-md-4 data">
                        <input type="text" class="form-control" placeholder="邮箱" v-model="formData.email">
                    </div>

                    <div class="col-md-2 title">密码</div>
                    <div class="col-md-4 data">
                        <input type="text" class="form-control" placeholder="密码" v-model="formData.password">
                    </div>

                    <div class="col-md-2 title">姓名</div>
                    <div class="col-md-4 data">
                        <input type="text" class="form-control" placeholder="姓名" v-model="formData.userName">
                    </div>

                    <div class="col-md-2 title">所在部门</div>
                    <div class="col-md-4 data">
                        <select class="form-control" v-model="formData.deptId">
                            <option v-for="dept in deptList" :value="dept.id">{{dept.deptName}}</option>
                        </select>
                    </div>

                    <div class="col-md-2 title">性别</div>
                    <div class="col-md-4 data">
                        <div class="form-group form-inline">
                            <div class="radio"><label><input type="radio" v-model="formData.gender=0" value="0">男</label></div>
                            <div class="radio"><label><input type="radio"v-model="formData.gender" value="1">女</label></div>
                        </div>
                    </div>

                    <div class="col-md-2 title">出生年月</div>
                    <div class="col-md-4 data">
                        <div class="input-group date">
                            <div class="input-group-addon">
                                <i class="fa fa-calendar"></i>
                            </div>
                            <input type="date" placeholder="出生年月" v-model="formData.birthday" class="form-control pull-right" >
                        </div>
                    </div>

                    <div class="col-md-2 title">状态</div>
                    <div class="col-md-4 data">
                        <div class="form-group form-inline">
                            <div class="radio"><label><input type="radio" v-model="formData.state" value="0">停用</label></div>
                            <div class="radio"><label><input type="radio" v-model="formData.state=1" value="1">启用</label></div>
                        </div>
                    </div>

                    <div class="col-md-2 title">电话</div>
                    <div class="col-md-4 data">
                        <input type="text" class="form-control" placeholder="电话" v-model="formData.telephone">
                    </div>

                    <div class="col-md-2 title">入职时间</div>
                    <div class="col-md-4 data">
                        <div class="input-group date">
                            <div class="input-group-addon">
                                <i class="fa fa-calendar"></i>
                            </div>
                            <input type="date" placeholder="入职时间" v-model="formData.joinDate" class="form-control pull-right" >
                        </div>
                    </div>

                </div>
                <div class="box-tools text-center">
                    <button type="button" @click="handleAdd()" class="btn bg-maroon">保存</button>
                    <button type="button" class="btn bg-default" @click="resetForm();dialogFormVisible4Add=false">返回</button>
                </div>
            </el-form>
        </el-dialog>

        <!--编辑弹出框-->
        <el-dialog title="编辑用户信息" :visible.sync="dialogFormVisible4Edit" @close="resetForm()">
            <!--
                :model="formData": 关联数据
                :rules: 关联校验规则
                ref： 在获取表单对象时使用
            -->
            <el-form :model="formData" ref="editForm" label-width="100px" class="demo-ruleForm">
                <div class="row data-type" style="margin: 0px">
                    <div class="col-md-2 title">邮箱</div>
                    <div class="col-md-4 data">
                        <input type="text" class="form-control" placeholder="邮箱" v-model="formData.email" readonly>
                    </div>

                    <div class="col-md-2 title">密码</div>
                    <div class="col-md-4 data">
                        <input type="text" class="form-control" placeholder="密码" v-model="formData.password" readonly>
                    </div>

                    <div class="col-md-2 title">姓名</div>
                    <div class="col-md-4 data">
                        <input type="text" class="form-control" placeholder="姓名" v-model="formData.userName">
                    </div>

                    <div class="col-md-2 title">所在部门</div>
                    <div class="col-md-4 data">
                        <select class="form-control" v-model="formData.deptId">
                            <option v-for="dept in deptList" :value="dept.id">{{dept.deptName}}</option>
                        </select>
                    </div>

                    <div class="col-md-2 title">性别</div>
                    <div class="col-md-4 data">
                        <div class="form-group form-inline">
                            <div class="radio"><label><input type="radio" v-model="formData.gender" value="0">男</label></div>
                            <div class="radio"><label><input type="radio"v-model="formData.gender" value="1">女</label></div>
                        </div>
                    </div>

                    <div class="col-md-2 title">出生年月</div>
                    <div class="col-md-4 data">
                        <div class="input-group date">
                            <div class="input-group-addon">
                                <i class="fa fa-calendar"></i>
                            </div>
                            <input type="date" placeholder="出生年月" v-model="formData.birthday" class="form-control pull-right" >
                        </div>
                    </div>

                    <div class="col-md-2 title">状态</div>
                    <div class="col-md-4 data">
                        <div class="form-group form-inline">
                            <div class="radio"><label><input type="radio" v-model="formData.state" value="0">停用</label></div>
                            <div class="radio"><label><input type="radio" v-model="formData.state" value="1">启用</label></div>
                        </div>
                    </div>

                    <div class="col-md-2 title">电话</div>
                    <div class="col-md-4 data">
                        <input type="text" class="form-control" placeholder="电话" v-model="formData.telephone">
                    </div>

                    <div class="col-md-2 title">入职时间</div>
                    <div class="col-md-4 data">
                        <div class="input-group date">
                            <div class="input-group-addon">
                                <i class="fa fa-calendar"></i>
                            </div>
                            <input type="date" placeholder="入职时间" v-model="formData.joinDate" class="form-control pull-right" >
                        </div>
                    </div>

                </div>
                <div class="box-tools text-center">
                    <button type="button" @click="handleEdit()" class="btn bg-maroon">保存</button>
                    <button type="button" class="btn bg-default" @click="resetForm();dialogFormVisible4Edit=false">返回</button>
                </div>
            </el-form>
        </el-dialog>

        <!--配置角色弹出框-->
        <el-dialog title="配置用户角色信息" :visible.sync="dialogFormVisible4Role" @close="resetForm()">
            <!-- .box-body -->
            <div class="box box-primary">
                <div class="box-header with-border">
                    <h3 class="box-title">用户 [{{user.userName}}] 角色列表</h3>
                </div>
                <div class="box-body">
                    <el-form :model="user" ref="addForm" label-width="100px" class="demo-ruleForm">
                        <div class="textbox" id="centerTextbox">
                            <div style="text-align:left">
                                 <span v-for="role in roleList" style="padding:3px;margin-right:30px;width: 160px;display: inline-block">
                                     <input type="checkbox" v-model="checkedRoleIds" :value="role.id"/>{{role.name}}
                                 </span>
                            </div>
                        </div>
                    </el-form>
                </div>
            </div>
            <div class="box-tools text-center">
                <button type="button" @click="handleSaveRole(user.id)" class="btn bg-maroon">保存</button>
                <button type="button" class="btn bg-default" @click="resetForm();dialogFormVisible4Role=false">返回</button>
            </div>
        </el-dialog>
    </div>

    <script>
        new Vue({
            el:"#frameContent",
            data:{
                checkedItemIds:[], //选中的用户id们
                dataList: [],//当前页要展示的分页列表数据
                deptList:[], //dialog对话框中要展示的部门列表
                user:{}, //用户对象,用于配置用户的角色信息
                roleList:[],//dialog对话框中要展示的角色列表
                checkedRoleIds:[], //选中的角色id们
                pagination:{
                    currentPage:1, //当前页数
                    pageSize:5, //每页条数
                    total:100 //总条数
                },
                formData: {},//表单数据
                dialogFormVisible4Add: false,//增加表单是否可见
                dialogFormVisible4Edit:false,//编辑表单是否可见
                dialogFormVisible4Role:false,//配置角色表单是否可见
                permissionList:[] //表示权限列表，控制功能按钮是否加载
            },
            created(){ //vue对象创建完成的回调函数
                this.findByPage();
                //查询用户的权限列表，能操作哪些功能的路径
                /*this.findPermissionList();*/
            },
            methods:{
                findPermissionList(){
                    // 查询用户的权限列表，能操作哪些功能的路径
                    axios.get("../system/module/findPermissionList").then(resp=>{
                        if(resp.data.flag){
                            //保存权限列表
                            this.permissionList=resp.data.data;
                        }else{
                            this.$message.error(resp.data.message);
                        }
                    })
                },
                //分页查询方法
                findByPage(){
                    //发送异步请求，分页查询 ，参数是this.pagination
                    axios.get("../system/user/findByPage",{params:this.pagination}).then(resp=>{
                        //判断查询是否成功
                        if(resp.data.flag){
                            //在表格中展示分页数据,给dataList赋值
                            //resp.data得到result, resp.data.data得到pageInfo
                            this.dataList=resp.data.data.list;
                            //展示分页条，给this.pagination.total赋值
                            this.pagination.total=resp.data.data.total;
                        }else{
                            this.$message.error(resp.data.message);
                        }

                    })
                },
                //重置表单方法
                resetForm(){
                    this.formData={};
                },
                //新建方法
                handleCreate(){
                    //显示新增弹出框
                    this.dialogFormVisible4Add=true;
                    //查询所有部门信息
                    axios.get("../system/dept/findAll").then(resp=>{
                        if(resp.data.flag){
                            //在下拉框中展示所有部门信息
                            this.deptList=resp.data.data;
                        }else{
                            this.$message.error(resp.data.message);
                        }
                    })
                },
                //保存方法
                handleAdd(){
                    //发送异步请求，新增信息,参数是this.formData
                    axios.post("../system/user/save",this.formData).then(resp=>{
                        if(resp.data.flag){
                            // 新增成功
                            //显示提示信息
                            this.$message.success(resp.data.message);
                            //重新分页查询
                            this.findByPage();
                            //隐藏弹出框
                            this.dialogFormVisible4Add=false;
                        }else{
                            this.$message.error(resp.data.message);
                        }
                    })

                },
                //修改方法
                handleUpdate(id){
                    //显示弹出框
                    this.dialogFormVisible4Edit=true;
                    //发送异步请求，获取信息展示到弹出框中
                    axios.get("../system/user/findById?id="+id).then(resp=>{
                        if(resp.data.flag){
                            //将数据展示到输入框中
                            this.formData=resp.data.data;
                        }else{
                            this.$message.error(resp.data.message);
                        }
                    });
                    //查询所有部门信息
                    axios.get("../system/dept/findAll").then(resp=>{
                        if(resp.data.flag){
                            //在下拉框中展示所有部门信息
                            this.deptList=resp.data.data;
                        }else{
                            this.$message.error(resp.data.message);
                        }
                    })
                },
                //编辑方法
                handleEdit(){
                    //发送异步请求，保存修改的数据
                    axios.post("../system/user/edit",this.formData).then(resp=>{
                        if(resp.data.flag){
                            // 新增成功
                            //显示提示信息
                            this.$message.success(resp.data.message);
                            //重新分页查询
                            this.findByPage();
                            //隐藏弹出框
                            this.dialogFormVisible4Edit=false;
                        }else{
                            this.$message.error(resp.data.message);
                        }
                    })
                },
                //删除方法
                handleDelete(){
                    //获取要删除的条目ID们
                    //判断用是否至少勾选一个
                    if(this.checkedItemIds.length){
                        //至少勾选了一个
                        //弹出确认提示框，让用户进步确认，防止误删
                        this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: 'warning'
                        }).then(() => {
                            //表示用户点击了确认按钮,发送异步请求，批量删除
                            axios.post("../system/user/delete",this.checkedItemIds).then(resp=>{
                                if(resp.data.flag){
                                    // 新增成功
                                    //显示提示信息
                                    this.$message.success(resp.data.message);
                                    //重新分页查询
                                    this.findByPage();
                                }else{
                                    this.$message.error(resp.data.message);
                                }
                            })
                        })
                    }else{
                        //一个都没有勾选
                        this.$message.error("您至少要勾选一个条目😣!");
                    }
                },
                //给用户配置角色的方法
                handleShowRole(id){
                    //展示弹出框
                    this.dialogFormVisible4Role=true;
                    //重置选中的复选框
                    this.checkedRoleIds=[];
                    //查询用户信息
                    axios.get("../system/user/findById?id="+id).then(resp=>{
                        if(resp.data.flag){
                            this.user=resp.data.data;
                        }else{
                            this.$message.error(resp.data.message)
                        }
                    })
                    //查询所有角色列表
                    axios.get("../system/role/findAll").then(resp=>{
                        if(resp.data.flag){
                            this.roleList=resp.data.data;
                        }else{
                            this.$message.error(resp.data.message);
                        }
                    })
                    //如果该用户具有这个角色,那么这个角色要被选中
                    axios.get("../system/role/findRoleIdsByUserId?userId="+id).then(resp=>{
                        if(resp.data.flag){
                            this.checkedRoleIds=resp.data.data;
                        }else{
                            this.$message.error(resp.data.message);
                        }
                    })
                },
                handleSaveRole(id){
                    //根据用户id更新用户绑定的角色,所以访问userServlet
                    axios.post(`../system/user/updateUserAndRoles?userId=${id}`,this.checkedRoleIds).then(resp=>{
                        if(resp.data.flag){
                            //跳转到角色页面
                            location.href="user.html";
                        }else{
                            this.$message.error(resp.data.message);
                        }
                    })
                },
                //改变每页条数时执行的函数
                handleSizeChange(pageSize) {
                    //修改分页查询的参数
                    this.pagination.pageSize = pageSize;
                    //重新执行查询
                    this.findByPage();
                },
                //改变页码时执行的函数
                handleCurrentChange(pageNum) {
                    //修改分页查询的参数
                    this.pagination.currentPage = pageNum;
                    //重新执行查询
                    this.findByPage();
                }
            }
        });
    </script>
</body>
</html>